<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        nav, footer {
            width: 100%;
            height: 60px;
            background-color: #4455aa;
            font-size: 30px;
            color: white;
            text-align: center;
            line-height: 60px;
        }

        .midBox {
            width: 700px;
            height: auto;
            margin: auto;
        }
        .midBox > div {
            margin-top: 50px;
            font-size: 30px;
        }

        .midBox > div > input {
            height: 15px;
            width: 400px;
            border: 2px solid black;

        }

        footer > input {
            /*margin-left: 100px;*/
            height: 50px;
            width: 220px;
            font-size: 25px;
        }
        .errorSpan {
            color: red;
            font-size: 15px;
        }
    </style>
    <script src="/js/axios.min.js"></script>
    <script src="/js/query.js"></script>
    <script src="/js/add.js"></script>
</head>
<body>
<nav>
    新用户注册
</nav>
<div class="midBox">
    <div>
        请输入账号：<input type="text" id="userName"><br>
        <span id="userNameSpan" class="errorSpan"></span>
    </div>
    <div>
        请输入密码：<input type="password" id="password"><br>
        <span id="passwordSpan" class="errorSpan"></span>
    </div>
    <div>
        请输入邮箱：<input type="email" id="mail"><br>
        <span id="mailSpan" class="errorSpan"></span>
    </div>
    <div style="display: flex">
        请选择头像：<div><input type="file" id="fileTxt" onchange="changeFace()"></div>
        <img src="" width="150px" height="150px" id="faceImg"><br>
    </div>

</div>
<footer>
    <input type="button" value="点击重置">
    <input type="button" value="点击注册" onclick="add()">
</footer>
</body>
</html>